{% extends ../../base/parent.html%}
{% block header %}
<title>仪表板</title>
<meta name="keywords" content="">
<meta name="description" content="">
{% end %}
{% block nav %}
<nav class="breadcrumb" style="background-color:#fff;padding: 0 24px">
    首页
    <span class="c-gray en">/</span>
    仪表盘
</nav>
{% end %}
{% block body %}
<article class="Hui-admin-content clearfix">
    <div class="col-md-4">
        <div class="panel">
            <div class="panel-header" style="padding:15px 24px;font-weight: 400;color:#999;">总访问量：</div>
            <div class="panel-body" style="padding:0 24px;">
                <div class="c-success" style="font-size: 30px;line-height: 38px;padding-bottom: 24px;">
                    9,999,999
                </div>
                <div class="f-14" style="padding: 10px 0;border-top:solid 1px #eee"><span class="c-999">今日访问量</span>
                    <span>1,234</span></div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel">
            <div class="panel-header" style="padding:15px 24px;font-weight: 400;color:#999;">总访问量：</div>
            <div class="panel-body" style="padding:0 24px;">
                <div class="c-success" style="font-size: 30px;line-height: 38px;padding-bottom: 24px;">
                    9,999,999
                </div>
                <div class="f-14" style="padding: 10px 0;border-top:solid 1px #eee"><span class="c-999">今日访问量</span>
                    <span>1,234</span></div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel">
            <div class="panel-header" style="padding:15px 24px;font-weight: 400;color:#999;">总访问量：</div>
            <div class="panel-body" style="padding:0 24px;">
                <div class="c-success" style="font-size: 30px;line-height: 38px;padding-bottom: 24px;">
                    9,999,999
                </div>
                <div class="f-14" style="padding: 10px 0;border-top:solid 1px #eee"><span class="c-999">今日访问量</span>
                    <span>1,234</span></div>
            </div>
        </div>
    </div>
</article>
<article class="Hui-admin-content clearfix">
    <div class="col-md-4">
        <div class="panel">
            <div class="panel-header" style="padding:15px 24px;font-weight: 400;color:#999;">总访问量：</div>
            <div class="panel-body" style="padding:0 24px;">
                <div class="c-success" style="font-size: 30px;line-height: 38px;padding-bottom: 24px;">
                    9,999,999
                </div>
                <div class="f-14" style="padding: 10px 0;border-top:solid 1px #eee"><span class="c-999">今日访问量</span>
                    <span>1,234</span></div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel">
            <div class="panel-header" style="padding:15px 24px;font-weight: 400;color:#999;">总访问量：</div>
            <div class="panel-body" style="padding:0 24px;">
                <div class="c-success" style="font-size: 30px;line-height: 38px;padding-bottom: 24px;">
                    9,999,999
                </div>
                <div class="f-14" style="padding: 10px 0;border-top:solid 1px #eee"><span class="c-999">今日访问量</span>
                    <span>1,234</span></div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="panel">
            <div class="panel-header" style="padding:15px 24px;font-weight: 400;color:#999;">总访问量：</div>
            <div class="panel-body" style="padding:0 24px;">
                <div class="c-success" style="font-size: 30px;line-height: 38px;padding-bottom: 24px;">
                    9,999,999
                </div>
                <div class="f-14" style="padding: 10px 0;border-top:solid 1px #eee"><span class="c-999">今日访问量</span>
                    <span>1,234</span></div>
            </div>
        </div>
    </div>
</article>
<article class="Hui-admin-content clearfix">
    <div class="mt-20">
        <div class="col-md-12">
            <div class="panel">
                <div class="panel-body" 发布>
                    <p class="f-20 text-success">欢迎使用H-ui.admin
                        <span class="f-14">v2.3</span>
                        后台模版！
                    </p>
                    <p>登录次数：18 </p>
                    <p>上次登录IP：222.35.131.79.1 上次登录时间：2014-6-14 11:19:55</p>
                    <table class="table table-border table-bordered table-bg mt-20">
                        <thead>
                        <tr>
                            <th colspan="2" scope="col">服务器信息</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th width="30%">服务器计算机名</th>
                            <td><span id="lbServerName">http://127.0.0.1/</span></td>
                        </tr>
                        <tr>
                            <td>服务器IP地址</td>
                            <td>192.168.1.1</td>
                        </tr>
                        <tr>
                            <td>服务器域名</td>
                            <td>www.h-ui.net</td>
                        </tr>
                        <tr>
                            <td>服务器端口</td>
                            <td>80</td>
                        </tr>
                        <tr>
                            <td>服务器IIS版本</td>
                            <td>Microsoft-IIS/6.0</td>
                        </tr>
                        <tr>
                            <td>本文件所在文件夹</td>
                            <td>D:\WebSite\HanXiPuTai.com\XinYiCMS.Web\</td>
                        </tr>
                        <tr>
                            <td>服务器操作系统</td>
                            <td>Microsoft Windows NT 5.2.3790 Service Pack 2</td>
                        </tr>
                        <tr>
                            <td>系统所在文件夹</td>
                            <td>C:\WINDOWS\system32</td>
                        </tr>
                        <tr>
                            <td>服务器脚本超时时间</td>
                            <td>30000秒</td>
                        </tr>
                        <tr>
                            <td>服务器的语言种类</td>
                            <td>Chinese (People's Republic of China)</td>
                        </tr>
                        <tr>
                            <td>.NET Framework 版本</td>
                            <td>2.050727.3655</td>
                        </tr>
                        <tr>
                            <td>服务器当前时间</td>
                            <td>2014-6-14 12:06:23</td>
                        </tr>
                        <tr>
                            <td>服务器IE版本</td>
                            <td>6.0000</td>
                        </tr>
                        <tr>
                            <td>服务器上次启动到现在已运行</td>
                            <td>7210分钟</td>
                        </tr>
                        <tr>
                            <td>逻辑驱动器</td>
                            <td>C:\D:\</td>
                        </tr>
                        <tr>
                            <td>CPU 总数</td>
                            <td>4</td>
                        </tr>
                        <tr>
                            <td>CPU 类型</td>
                            <td>x86 Family 6 Model 42 Stepping 1, GenuineIntel</td>
                        </tr>
                        <tr>
                            <td>虚拟内存</td>
                            <td>52480M</td>
                        </tr>
                        <tr>
                            <td>当前程序占用内存</td>
                            <td>3.29M</td>
                        </tr>
                        <tr>
                            <td>Asp.net所占内存</td>
                            <td>51.46M</td>
                        </tr>
                        <tr>
                            <td>当前Session数量</td>
                            <td>8</td>
                        </tr>
                        <tr>
                            <td>当前SessionID</td>
                            <td>gznhpwmp34004345jz2q3l45</td>
                        </tr>
                        <tr>
                            <td>当前系统用户名</td>
                            <td>NETWORK SERVICE</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</article>
{% end %}
{% block javascript %}
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/static/libs/datatables/1.10.15/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/static/libs/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="/static/plugins/hui/business/js/main.js"></script>
<!--/请在上方写此页面业务相关的脚本-->
{% block js %}
<script type="text/javascript">
    $(document).ready(function () {
        $("#menu-dashboard dd").css("display", "block");
        $("#menu-dashboard #dashboard").addClass("current");
    });
    /* =====所有的列表页都可照搬这套模式====== */
    // 获取URL参数，初始化条件
    function getUrlParameter() {
        // parseQueryString() 方法 在main.js中 提取URL参数为对象
        var urlObj = parseQueryString(window.location.href);
        // console.log(urlObj);
        $("#classifyID").val(urlObj.classifyID);
        $(".getData-list").attr("data-currPage", urlObj.currPage)
        $("#search-datetime-start").val(urlObj.datetimeStart);
        $("#search-datetime-end").val(urlObj.datatimeEnd);
        $("#search-input").val(urlObj.keywords);
    }

    // 封装一个获取数据列表的方法，将条件封装到options对象中
    function getDataList(options) {
        console.log(options);
        $.ajax({
            url: 'article-list.html',// 跳转到 action, 换成自己的接口
            data: options,
            type: 'get',
            cache: false,
            dataType: 'json', // 不一定非要json，可以是html，后台封好结构后，直接扔前台
            success: function (respData) {
                /* 大概的数据结构
                    respData: {
                        result: ture, // 返回状态
                        msg: '',		// 返回信息
                        pagination: { // 翻页数据
                            currPage: 1,// 当前第几页
                            total: 100, //数据总数
                            pageSize: 10,  // 每页条数
                        },
                        datas: [    // 详细数据
                            {
                                id: '',  // id
                                title: '', // 标题
                                classify: [  // 分类 允许属于多个分类
                                    {
                                        id: '',				// 分类id
                                        name: '',     // 分类名称
                                    },
                                    ……
                                ],
                                source: { // 来源
                                    id: '', // 来源id
                                    name: '', // 来源名称
                                },
                                updateTime: '', // 更新时间
                                viewsNo: '', // 浏览次数
                                status: {  // 各种状态
                                    examine: '',  // 审核状态
                                    manage: {     // 管理状态
                                        canPublish: 0, // 能否发布
                                        canEdit: 0,  // 能否编辑
                                        canDel: 0,   // 能否删除
                                    }
                                }
                            },
                            ……
                        ],
                    }
                */
                if (respData.result) { // 请求正确 返回true, 也指200状态
                    var data = respData.datas; // 返回的数据
                    var htmlstr = '';
                    if (data.length > 0) {
                        // 只有获取的数据对象长度大于0，我们才做for循环处理。
                        for (var i = 0; i < data.length; i++) { // for循环将json数据拼接成html结构。 此处可以用模板引擎。
                            htmlstr +=
                                '<tr>' +
                                '<td><input type="checkbox" value="" name=""></td>' +
                                '<td>' + data[i].id + '</td>' +
                                '<td class="text-l"><u style="cursor:pointer" class="text-primary" onClick="article_edit(\'查看\',\'article-zhang.html\',\'+data[i].id+\')" title="查看">' + data[i].title + '</u></td>' +
                                '<td data-id="' + data[i].classify.id + '">' + data[i].classify.name + '</td>' +
                                '<td data-id="' + data[i].source.id + '">' + data[i].source.name + '</td>' +
                                '<td>' + data[i].updateTime + '</td>' +
                                '<td>' + data[i].viewsNo + '</td>';
                            // data[i].status.examine 审核状态(字符串) '0'为草稿，'1'为审核中，'2'通过，'3'为未通过，'4'为发布，'5'为下架
                            if (data[i].status.examine == '0') {
                                htmlstr += '<td class="td-status"><span class="label label-default radius">草稿</span></td>';
                            }
                            if (data[i].status.examine == '1') {
                                htmlstr += '<td class="td-status"><span class="label label-primary radius">审核中</span></td>';
                            }
                            if (data[i].status.examine == '2') {
                                htmlstr += '<td class="td-status"><span class="label label-primary radius">通过，待发布</span></td>';
                            }
                            if (data[i].status.examine == '3') {
                                htmlstr += '<td class="td-status"><span class="label label-danger radius">未通过</span></td>';
                            }
                            if (data[i].status.examine == '4') {
                                htmlstr += '<td class="td-status"><span class="label label-success radius">已发布</span></td>';
                            }
                            if (data[i].status.examine == '5') {
                                htmlstr += '<td class="td-status"><span class="label label-danger radius">已下架</span></td>';
                            }

                            htmlstr += '<td class="f-14 td-manage">';
                            // data[i].status.manage 管理状态集合（子对象为布尔值）  canPublish 能否发布  canEdit 能否编辑 canDel能否删除
                            if (data[i].status.examine == '4' && data[i].status.manage.canPublish) {
                                htmlstr += '<a style="text-decoration:none" onClick="article_stop(this,\'+ data[i].id +\')" href="javascript:;" title="下架">下架</a>';
                            }
                            if ((data[i].status.examine == '2' || data[i].status.examine == '5') && data[i].status.manage.canPublish) {
                                htmlstr += '<a style="text-decoration:none" onClick="article_start(this,\'+ data[i].id +\')" href="javascript:;" title="发布">发布</a>';
                            }
                            if (data[i].status.manage.canEdit) {
                                htmlstr += '<a style="text-decoration:none" class="ml-5" onClick="article_edit(\'资讯编辑\',\'article-add.html\',\'+ data[i].id +\')" href="javascript:;" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a>';
                            }
                            if (data[i].status.manage.canDel) {
                                htmlstr += '<a style="text-decoration:none" class="ml-5" onClick="article_del(this,\'+ data[i].id +\')" href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a>';
                            }
                            htmlstr += '</td>' +
                                '</tr>';
                        }
                        // 在页面对应<tbody class=".getData-list">标签中输出拼接好的html结构。
                        $(".getData-list").html(htmlstr);

                        // 渲染分页
                        laypage({
                            cont: 'laypage',    //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：&lt;div id="laypage">&lt;/div>
                            pages: Math.ceil(respData.pagination.total / respData.pagination.pageSize),  // 除法运算，向上取整
                            curr: currPage,    //初始化当前页
                            hash: 'page',
                            limits: [10, 25, 50, 100],
                            first: '首页',
                            last: '尾页',
                            prev: '<em>&lt;&lt;</em>',
                            next: '<em>&gt;&gt;</em>',
                            jump: function (e, first) { //触发分页后的回调
                                console.log(e);
                                if (!first) {
                                    $(".getData-list").attr("data-currPage", e.curr);
                                    runGetDataList();
                                }
                            }
                        });
                    } else {
                        console.log(respData.msg); // 返回正确状态，但是没有数据，在此处处理。
                        var tdNum = $("#data-table-list thead tr td").length;
                        htmlstr = '<tr><td colspan="' + tdNum + '" class="data-null">数据为空</td></tr>';
                        $(".getData-list").html(htmlstr);
                    }
                } else {
                    console.log(respData.msg);  // 返回错误状态，通常指网络请求失败、后台报错等，最好后台给出错误提示，方便前台调试。也可定义几种返回的错误状态码，如201 203 400 404 500 503等。
                }
            },
            error: function (respData) { // ajax的error状态
                console.log(respData);
            }
        });
    }

    // 运行获取数据列表这个方法，这里面可以灵活自定义要传递的参数
    function runGetDataList() {
        getDataList({
            classifyID: $("#classifyID").val() || 0, // 分类id
            currPage: $(".getData-list").attr("data-currPage") || 1, // 当前第几页
            pageSize: 10, // 每页几条
            datetimeStart: $("#search-datetime-start").val() || '',
            datatimeEnd: $("#search-datetime-end").val() || '',
            keywords: $("#search-input").val() || '',
        });
    }

    $(function () {
        runDatetimePicker(); // 实例化日期控件
        getUrlParameter(); // 获取URL参数，初始化条件
        $('.table-sort').dataTable({
            "aaSorting": [[1, "desc"]],//默认第几个排序
            "bStateSave": true,//状态保存
            "pading": false,
            "pagingType": "full_numbers",
            "aoColumnDefs": [
                //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
                {"orderable": false, "aTargets": [0, 8]}// 不参与排序的列
            ]
        });
        // runGetDataList(); // 页面载入，自执行加载数据...
        // 点击搜索执行...
        $("#search-submit").on("click", function () {
            // runGetDataList();
        });
    });
</script>
{% end %}
{% end %}
